<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<base th:href="@{/}"/>
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
	<div class="contain">
		<h3>教室管理</h3>
		<table class="table table-hover">
			<tr>
				<td>所属教学楼</td>
				<td>教室号</td>
				<td>教室类型</td>
				<td>最大容量</td>
				<td>操作</td>
			</tr>
			<tr th:each="classrm:${classrmlist}" th:id="|tr${classrm.classrmid}|">
				<td th:text="${classrm.building.buildname}"></td>
				<td th:text="${classrm.clrnum}"></td>
				<td th:text="${classrm.classrmtype}==1?'普通教室':'多媒体教室' "></td>
				<td th:text="${classrm.maxcapacity}"></td>
				<td><a th:href="|mc/to_modifyClass/${classrm.classrmid}|">编辑</a>
					<a th:href="|javascript:deleteClassrm(${classrm.classrmid});|">删除</a>
				</td>
				
			</tr>
		</table>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addClassroom">
		  添加新教室
		</button>
		<div class="text-center">
			<nav>
				<ul class="pagination">
					<li><a th:href="@{/mc/getAllClass/(pageNo=1)}">首页</a></li>
					<li><a th:href="@{/mc/getAllClass/(pageNo=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></li>
					<li th:each="page:${pageInfo.navigatepageNums}">
						<a th:class="${pageInfo.pageNum}==${page}?'active'"
						   th:href="@{/mc/getAllClass/(pageNo=${page})}">[[${page}]]</a>
					</li>
					<li><a th:href="@{/mc/getAllClass/(pageNo=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
					<li><a th:href="@{/mc/getAllClass/(pageNo=${pageInfo.pages})}">尾页</a></li>
				</ul>
			</nav>
		</div>
		<br>
		
		
		<!-- addClassroom -->
		<div class="modal fade" id="addClassroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加新教室</h4>
		      </div>
		      <form action="mc/addClassrm" method="post">
		      <div class="modal-body">
					<dl class="dl-horizontal">
					  <dt><label for="buildname">教室号：</label></dt>
					  <dd><input required="required" maxlength="3" type="text" name="clrnum" placeholder="例如：101" class="form-control"></dd>
					  <br>
					  <dt>所属教学楼：</dt>
					  <dd>
				  		<select name="buildingId" >
							<option th:each="building:${buildinglist}" th:value="${building.buildingId}" th:text="${building.buildname}"></option>
						</select>
					  </dd>
					  <br>
					  <dt>教室类型：</dt>
					  <dd>
				  		<select name="classrmtype" >
							<option value="1">普通教室</option>
							<option value="2">多媒体教室</option>
						</select>
					  </dd>
					  <br>
					  <dt>教室容量：</dt>
					  <dd><input name="maxcapacity" style="width: 170px;display: inline;" type="range" min="15" max="300" step="5" onchange="b.value=this.value"/><output class="value" id="b" for="range1"style="display: inline;" >150</output></dd>
					</dl>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <input type="submit" class="btn btn-primary" value="添 加">
		      </div>
		      </form>
		    </div>
		  </div>
		</div>
		
	</div>
	
	<script>
		var elem = document.querySelector('input[type="range"]');
		var rangeValue = function(){
	 	 var newValue = elem.value;
	 	 var target = document.querySelector('.value');
	 	 target.innerHTML = newValue;
		}
		elem.addEventListener("input", rangeValue);
		function deleteClassrm(id) {
            $.ajax({
                url: 'mc/deleteClassrm',
                type: 'POST',
                data: {classrmid: id}, 
                success: function () {
                	  $("#tr" + id).remove(); 
                },
                error: function (req, status, error) {
                    alert("Ajax请求失败，错误：" + error);
                }
            });
        }
</script>
</body>
</html>